<template>
	<view class="page">
		<view class="page-ctx">
			<view class="product-info">
				<view class="product-item flex-between">
					<view class="poster-box">
						<image class="poster" :src="item.productImage || product.thumb" mode="aspectFill"></image>
					</view>
					<view class="info-box">
						<view class="title ellipsis-2">
							{{product.title}}
						</view>
						<view class="desc-box">
							<view class="desc ellipsis-1">
								{{item.productKeyVals}}
							</view>
						</view>
						<view class="price-box flex-between">
							<view class="price-info">
								<text class="huobi">￥</text>
								<text class="price">{{product.priceSale}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="review-info">
				<view class="reviews-item" v-for="(item,index) in list" :key="index">
					<view class="reviews-info">
						<view class="user-box flex">
							<view class="avatar-box">
								<image v-if="item.image" :src="item.image" mode="aspectFill"></image>
								<image v-else :src="vuex_avatar_default" mode=""></image>
							</view>
							<view class="user-info flex-between">
								<view class="reviews-nick">
									{{item.nickname}}
								</view>
								<view class="reviews-time">
									{{item.createdTime}}
								</view>
							</view>
						</view>
						<view class="reviews-guige">
							规格：{{item.productKeyVals}}
						</view>
						<view class="reviews-text">
							{{item.content}}
						</view>
						<view class="reviews-pic">
							<view class="pic-list">
								<view class="pic-item" v-for="(pic,picindex) in  item.images" :key="picindex"
									@click="doPreview(picindex,pic, item.images)">
									<image :src="pic" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<w_fill_block height="60"></w_fill_block>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				item: {},
				list: [],
				product: {},
				product_poster: ''
			}
		},
		onLoad(option) {
			try {
				this.item = JSON.parse(option.item) || {};
				this.list = [this.item]

				this.$log('评价信息', this.item)
			} catch (e) {
				//TODO handle the exception
			}

			this.setView();
		},
		onShow() {

		},
		onHide() {},
		methods: {
			setView() {
				this.query_product()
			},

			query_product() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_detail',
						inventoryId: this.item.inventoryId
					},
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data;
						this.product = res.data;
						// this.product_poster = res.data.images[0]
					}
				})
			},
			
			doPreview(current, image, urls) {
				console.log('图片预览 pic', image)
				// console.log('图片预览 urls', urls)
				uni.previewImage({
					current: current,
					urls: urls,
					indicator: 'default',
					loop: false,
				});
			},
			
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 24rpx 32rpx;
	}



	.product-info {
		.product-item {
			padding: 40rpx 24rpx;
			// border-bottom: 1rpx solid #EEEEEE;
			background: #FFFFFF;
			margin-bottom: 16rpx;

			.poster-box {
				width: 136rpx;
				height: 136rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.poster {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.info-box {
				flex: 1;
				overflow: hidden;
				padding-left: 24rpx;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.desc-box {
					margin-top: 8rpx;
					height: 30rpx;

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838B9E;
					}
				}

				.price-box {
					margin-top: 18rpx;

					.price-info {
						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 16rpx;
							color: #000000;
						}

						.price {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #000000;
						}
					}

					.add-box {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
	}




	.review-info {
		.reviews-item {
			margin-bottom: 24rpx;
			display: flex;
			align-items: flex-start;
			padding: 32rpx 24rpx;
			// border-bottom: 1rpx solid #EEEEEE;
			background: #FFFFFF;
			// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx 16rpx 16rpx 16rpx;


			&:last-child {
				border-bottom: none;
			}


			// .avatar-box {
			// 	width: 80rpx;
			// 	height: 80rpx;
			// 	border-radius: 50%;
			// 	overflow: hidden;

			// 	image {
			// 		width: 80rpx;
			// 		height: 80rpx;
			// 	}
			// }

			.reviews-info {
				flex: 1;
				overflow: hidden;
				// padding-left: 20rpx;


				.user-box {

					.avatar-box {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.user-info {
						flex: 1;
						overflow: hidden;
						padding-left: 24rpx;

						.reviews-nick {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.reviews-time {
							// margin-top: 10rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #9695A3;
						}
					}
				}




				.reviews-star {
					margin-top: 10rpx;


					.star-list {

						.star-item {
							margin-right: 4rpx;
							width: 22rpx;
							height: 22rpx;

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}
					}
				}

				.reviews-guige {
					margin-top: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #9695A3;
				}

				.reviews-text {
					text-align: justify;
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					line-height: 1.6;
				}

				.reviews-pic {
					margin-top: 20rpx;

					.pic-list {
						display: flex;
						flex-wrap: wrap;

						.pic-item {
							margin-top: 20rpx;
							width: 140rpx;
							height: 140rpx;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							overflow: hidden;
							margin-right: 20rpx;

							&:nth-child(4n) {
								margin-right: 0;
							}

							&:nth-child(-n + 4) {
								margin-top: 0;
							}

							image {
								width: 140rpx;
								height: 140rpx;
							}
						}
					}
				}

				.product-box {
					margin-top: 30rpx;
					// width: 610rpx;
					min-height: 80rpx;
					background: #F8F8F8;

					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding: 0;

					.poster-box {
						width: 124rpx;
						height: 124rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 124rpx;
							height: 124rpx;
						}
					}

					.product-info {
						padding: 10rpx;
						padding-left: 24rpx;
						flex: 1;
						overflow: hidden;

						.product-title {
							height: 70rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.product-price {
							margin-top: 14rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;

							.huobi {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #E23410;
							}

							.value {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #E23410;
							}
						}
					}


				}
			}
		}
	}
</style>